import React from 'react'
import {inject,observer} from 'mobx-react'
import formatDate from '../../../utils/timeStamp'
import {Button} from 'antd'

@inject('songlist')@observer
class SongListDetail extends React.Component {
    constructor(props){
        super(props)
        this.state={
            detail:this.props.songlist.songlistDetail
        }
    }
    componentDidMount(){

    }
    render(){
        let data = this.state.detail
        let createTime = formatDate(data.createTime)
        let playCount = data.playCount/1000
        if(playCount > 1){
            playCount = Math.round(playCount) + '万'
        }else{
            playCount = '不足1万'
        }

        console.log(playCount)
        return(
            <div className='song-list-tabs'>
                <div className='left'>
                    <img src={data.coverImgUrl} alt=""></img>
                </div>
                <div className='right'>
                    <div className='title'>
                        <span>歌单</span>
                        <h3>{data.name}</h3>
                    </div>
                    <div className='creator'>
                        <img src={data.creator.avatarUrl} alt=""></img>
                        <span>{data.creator.nickname}</span>
                        <span>创建时间：{createTime}</span>
                    </div>
                    <div className='operate'>
                        <Button>播放全部</Button>
                        <Button>收藏({data.subscribedCount})</Button>
                        <Button>分享({data.shareCount})</Button>
                    </div>
                    <div className='tag'>标签：
                        {data.tags.map((item,index)=>{
                            return (
                                <span key={index}>{item}</span>
                            )
                        })}
                    </div>
                    <div className='detail'>简介：{data.copywriter}</div>
                    <div className='count'>
                        <span className='song'>歌曲数<br/>{data.trackCount}</span>
                    <span>播放数<br/>{playCount}</span>
                    </div>
                </div>
            </div>
        )
    }
    
}
export default SongListDetail